<template>
  <div class="flex gap-2 h-10">
    <MoleculeSearchInput
      v-model="searchValue"
      class="min-w-[384px] mr-4"
      placeholder="Поиск..."
      :search-variants="
        route.name === 'index'
          ? contactsStore.contactList
          : favoritesStore.favoritesList
      "
      show-search-variants
      show-photo-in-searh-variants
      :search-field="['lastNameRu', 'firstNameRu']"
      @choose-variant="handleChooseVariant"
    />
    <MoleculeSelect
      v-model:selected-radio="filter.selectedSort"
      placeholder="Сортировать по"
      :options="getSortOptions"
      radio
    />
    <MoleculeSelect
      v-model:selected-checkboxes="filter.selectedOrgs"
      placeholder="Организация"
      :options="getOrgsOptions"
      enable-select-all
      checkbox
      filterable
    />
    <MoleculeSelect
      v-model:selected-checkboxes="filter.selectedPositions"
      placeholder="Должность"
      enable-select-all
      filterable
      checkbox
      :options="getPositionOptions"
    />
    <MoleculeSelect
      v-model:selected-checkboxes="filter.selectedCities"
      placeholder="Город"
      enable-select-all
      filterable
      checkbox
      :options="getCityOptions"
    />
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { ApiEndpoints } from '~/types/ApiEndpoints'
import { useFilterStore } from '~/stores/filterStore'
import { useContactsStore } from '~/stores/contactsStore'
import { IUser } from '~/types/User'
import { useFavoritesStore } from '~/stores/favoritesStore'
import { useUserStore } from '~/stores/userStore'

const filterStore = useFilterStore()
const contactsStore = useContactsStore()
const favoritesStore = useFavoritesStore()
const userStore = useUserStore()
const router = useRouter()
const route = useRoute()
const searchValue = ref('')

const {
  filter,
  getCityOptions,
  getPositionOptions,
  getOrgsOptions,
  getSortOptions
} = storeToRefs(filterStore)

const handleChooseVariant = (variant: Partial<IUser>) => {
  router.push({ query: { contactId: variant.id } })
}

onMounted(() => {
  Promise.all([
    useAPIFetch(ApiEndpoints.GET_ALL_CITIES),
    useAPIFetch(ApiEndpoints.GET_ALL_POSITIONS)
  ])
    .then(([{ data: cities }, { data: positions }]) => {
      filterStore.cities = cities.value as any
      filterStore.positions = positions.value as any
    })
    .catch((e: Error) => {
      console.error(e.message)
    })
})

watch(
  () => userStore.user.orgUuid,
  () => {
    useAPIFetch(ApiEndpoints.GET_ALL_ORGS, {
      query: { orgUUID: userStore.user.orgUuid }
    })
      .then(({ data: orgs }) => {
        filterStore.orgs = orgs.value as any
      })
      .catch((e: Error) => {
        console.error(e.message)
      })
  }
)

watch(
  () => route.name,
  () => {
    searchValue.value = ''
  }
)

// при закрытии диалога с контактом - чистим строку поиска
watch(
  () => route.query,
  () => {
    if (Object.keys(route.query).length === 0) {
      searchValue.value = ''
    }
  }
)
</script>

<style scoped></style>
